﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.master" AutoEventWireup="true" Inherits="C1Calendar_Selection" Codebehind="Selection.aspx.cs" %>
<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1Calendar" TagPrefix="wijmo" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Head" Runat="Server">
	<style type="text/css">
		.style1
		{
			font-weight: normal;
		}
		.style2
		{
			font-weight: bold;
		}
	</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">

<wijmo:C1Calendar ID="C1Calendar1" runat="server" ShowWeekDays="true" ShowWeekNumbers="true">
</wijmo:C1Calendar>

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" Runat="Server">
<p>
	<strong>C1Calendar </strong>支持各种选择方案。
</p>

<p>
在月视图中，日期选择被<strong>SelectionMode </strong>属性控制。 <strong>SelectionMode</strong>  属性是一个包含五个布尔类型的子属性的对象。这五个子属性是：
</p>

<ul>
<li>一天</li>
<li>多天</li>
<li>一列</li>
<li>一行</li>
<li>整月</li>
</ul>


<p>
例如，如果我们把<span class="style1"><strong class="style2">SelectionMode.WeekDay</strong></span> 设置为True,那么“一行”的单元格就可选了。
如果我们想要“整列”可选,我们必须设置<strong>SelectionMode.WeekNumber
	</strong>和 <strong>ShowWeekDays</strong> 属性为True.
</p>

	</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" Runat="Server">

<div class="demo-options">
	<!-- Begin options markup -->
	<div class="option-row">
		<input type="checkbox" name="selectionmode" id="day" value="day" />一天
		<input type="checkbox" name="selectionmode" id="days" value="days" />多天
		<input type="checkbox" name="selectionmode" id="weekDay" value="weekDay" />一列
		<input type="checkbox" name="selectionmode" id="weekNumber" value="weekNumber" />一行
		<input type="checkbox" name="selectionmode" id="month" value="month" />整月
	</div>
	<!-- End options markup -->
</div>

<script type="text/javascript">
$(function () {

	$.each(["day", "days", "weekDay", "weekNumber", "month"], function (i, name) {
		$("#" + name).attr("checked", !!$("#<%=C1Calendar1.ClientID %>").c1calendar("option", "selectionMode")[name]);
	});

	$("input[type=checkbox]").change(function () {
		var chk = $(this);
		var selMode = $("#<%=C1Calendar1.ClientID %>").c1calendar("option", "selectionMode");
		selMode[chk.val()] = chk[0].checked;
		$("#<%=C1Calendar1.ClientID %>").c1calendar("option", "selectionMode", selMode);
	});
});
	
</script>

</asp:Content>

